<script setup>
import commonTable from '@/components/commonTable.vue'
import menuDialog from './components/menuDialog.vue'
import {
  getMenuListAsync,
  getMenuDataAsync,
  deleteMenuDataAsync
} from '@/api/menuManagement'

//关键词搜索
const formData = ref({
  key: ''
})

const tableData = ref([])
const tableHeader = ref([
  {
    slot: 'isParent',
    data: {
      label: '菜单级别',
      width: '100',
    },
  },
  {
    data: {
      prop: 'title',
      label: '菜单名称',
    },
  },
  {
    data: {
      prop: 'url',
      label: '菜单路径',
    },
  },
  {
    data: {
      prop: 'updateUser',
      label: '最后操作的用户',
    },
  },
  {
    data: {
      prop: 'orderRank',
      label: '排序',
      width: '80'
    }
  },
  {
    slot: 'operate',
    data: {
      label: '操作'
    }
  }
])
const tableProp = ref({
  isIndex: false,
  IndexText: '',
  expandAll: true,
  height: '65vh',
  rowClassName: ({ row, rowIndex }) => {

    if (row.parentId !== -1) {
      return 'custom-row'
    }
    return ''
  },
})

// 表格加载动画
const isLoading = ref(false)

//获取表格数据
const getTabelData = async () => {
  try {
    isLoading.value = true
    const params = {
      key: formData.value.key
    }
    const res = await getMenuListAsync(params)

    if (res) {
      if (res.data && Array.isArray(res.data) && res.data.length) {
        tableData.value = res.data.map(item => {
          const { subMenus, ...otherInfo } = item
          return {
            ...otherInfo,
            children: subMenus
          }
        })
      } else {
        tableData.value = []
      }
    }

    isLoading.value = false

  } catch (error) {
    isLoading.value = false
    ElMessage.error(error)
    console.log('%c [ error ]-109', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }
}

//新增角色
const addHandle = async () => {
  try {
    const res = await getMenuDataAsync({})
    if (res.code + '' === '200' && res.data) {
      menuInfo.value = res.data
      menuDialogVisbile.value = true
    }
  } catch (error) {
    console.log('%c [ error ]-115', 'font-size:13px; background:pink; color:#bf2c9f;', error)

  }

  menuDialogVisbile.value = true
}

//编辑角色
const eidtMenu = async (info) => {
  try {

    const res = await getMenuDataAsync(info)
    if (res.code + '' === '200' && res.data) {
      menuInfo.value = res.data
      menuDialogVisbile.value = true
    }
  } catch (error) {
    console.log('%c [ error ]-139', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }

}


//删除菜单
const deletedMenu = async (info) => {
  try {
    const res = await deleteMenuDataAsync(info)
    if (res && res.code + '' === '200') {
      ElMessage.success(`成功删除菜单【${info.title}】`)
      getTabelData()
    } else {
      ElMessage.error(res.msg)

    }
  } catch (error) {
    console.log('%c [ error ]-155', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }
}


//编辑的角色信息
const menuInfo = ref({})
//角色信息弹窗
const menuDialogVisbile = ref(false)

//更新或添加角色
const updateRole = () => {
  closeDialog()
  getTabelData()
}

const closeDialog = () => {
  menuDialogVisbile.value = false
  if (Object.keys(menuInfo.value).length) {
    menuInfo.value = {}
  }
}

onMounted(() => {
  getTabelData()
})

</script>

<template>
  <div class="role-container">
    <el-card>
      <template #header>
        <div class='card-header'>
          <el-form>
            <el-form-item label="菜单名称关键词" prop="key">
              <el-input class="search-inp" v-model="formData.key" placeholder="请输入关键字" clearable></el-input>
            </el-form-item>
          </el-form>

          <el-button class="btn-blue" type="primary" plain :icon="Search" @click="getTabelData">
            <el-icon>
              <Search />
            </el-icon>
            <span>查询</span>
          </el-button>
          <el-button class="btn-green" type="success" plain :icon="Plus" @click="addHandle">
            <el-icon>
              <Plus />
            </el-icon>
            <span>新增菜单</span>
          </el-button>
        </div>
      </template>

      <commonTable :tableData="tableData" :tableHeader="tableHeader" :tableProp="tableProp" :isLoading="isLoading">
        <template #isParent="{ scope }">
          <el-tag v-if="scope.parentId === -1" type="success">父菜单</el-tag>
          <el-tag v-else type="warning">子菜单</el-tag>

        </template>
        <template #operate="{ scope }">
          <div class="btn-group">
            <el-tooltip content="编辑菜单信息" placement="bottom">
              <el-button type="primary" plain circle @click="eidtMenu(scope)">
                <el-icon>
                  <Edit />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-popconfirm title="你确定要删除该菜单嘛?" @confirm="deletedMenu(scope)">
              <template #reference>
                <el-button type="danger" plain circle>
                  <el-icon>
                    <Delete />
                  </el-icon>
                </el-button>
              </template>
            </el-popconfirm>

          </div>
        </template>
      </commonTable>

    </el-card>
  </div>
  <menuDialog :visible="menuDialogVisbile" :menuInfo="menuInfo" @closeDialog="closeDialog" @updateDialog="updateRole">
  </menuDialog>

</template>

<style lang="scss" scoped>
.role-container {

  .card-header {
    display: flex;

    .search-inp {
      width: 200px;
      margin-right: 10px;
    }

    :deep(.el-button) {
      color: #fff;
      width: 100px;
      height: 35px;
      font-size: 16px;
      border-color: #c6c6c6;
    }

  }

  .card-footer {
    display: flex;
    justify-content: flex-end;

  }
}


:deep(.el-form-item__label) {
  font-weight: 700;
}

:deep(.el-table__placeholder) {
  display: none
}

:deep(.el-table .custom-row) {
  background-color: #fef8f8;
}
</style>